*{
    margin: 0;
    padding: 0;
}
.container{
    width: 1440px;
    height: 2000px;
    margin: 100px auto;
    text-align: center;
    position: relative;
    border: solid 45px #111111;
    background-image: url(images/背景.jpg);
}
.tou{
    width: 99px;
    height: 10px;
    position: absolute;
    top: 5px;
    color: #f8f1f1;
}
.header{
    widows: 1400px; 
    height: 250px;
    position: relative;
    margin: 30px auto 5px;
    border:  solid #f8f4f4;
}
.small{
    width: 60px;
    height: 30px;
    border-radius: 30px;
    background-color: #be7233;
    position: absolute;
    left: 35px;
    bottom: 45px;
    box-shadow: 5px 5px 5px  #81807f;
    transition: all 1s infinite;
}
.small:hover{
    transform: translate(10px, 10px) scale(2);
    color: #ecd7d7;
}
.one{
    position: absolute;
    left: 570px;
    top: 10px;
    animation: scale 5s ease 1 forwards;
}
@keyframes scale{
    0% {
        transform: scale(0.5);
    }
    100% {
        transform: scale(1.5);
    }
}
.tow{
    position: absolute;
    left: 740px;
    bottom: 5px;
    animation: move 5s infinite forwards;
    animation: move 5s linear 1.5s infinite alternate;
}
@keyframes move {
    0% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(90px, 90px);
    }
    50% {
        transform: translate(200px, 200px);
    }
    75% {
        transform: translate(300px, 300px);
    }
    100% {
        transform: translate(400px, 0px);
    }
}

.three{
    position: absolute;
    top: 20px;
    right: 60px;
}
.header p{
    text-align: left;
    display: inline-block;
    position: absolute;
    left: 40px;
    top: 85px;
    font-size: 15px;
    color: #eee3e3;
    
}
.header h2{
    text-align: left;
    margin: 10px;
    position: absolute;
    top: 10px;
    font-size: 45px;
    color: #a0571c;
    font-family:cursive ;   
}

.nav{
    width: 900px;
    height: 70px;
    margin: 10px auto 5px;
    position: absolute;
    left: 190px;
} 
a{
    color: #f5eeee;
    text-decoration: none;
} 
a:hover{
color:#e49096;
background-color:#d9d9d9 ;
}

.fo{
    display: inline-block;
    width: 50px;
    height: 20px;
    border-radius:25px ;
    text-decoration: none;
    /* background-color: #9c8a66; */
    border:  solid #f8f4f4;
    color: #e9b4b4;
    position: absolute;
    left: 50px;
    top: 20px;
}
.go{
    display: inline-block;
    width: 100px;
    height: 20px;
    border-radius:25px ;
    text-decoration: none;
    /* background-color: #9c8a66; */
    border:  solid #f8f4f4;
    color:  #e9b4b4;
    position: absolute;
    left: 370px;
    top: 20px;
}
.ho{
    display: inline-block;
    width: 50px;
    height: 20px;
    border-radius:25px ;
    text-decoration: none;
    /* background-color: #9c8a66; */
    border:  solid #f8f4f4;
    color:  #e9b4b4 ;
    position: absolute;
    right: 50px;
    top: 20px;
}   
/* .four{

    position: absolute;
    right: 56px;
    top: 390px;
} */
/* .five{
    position: absolute;
    left: 0px;
    top: 299px;
}
.six{
    position: absolute;
    right: 0px;
    top: 299px;
} */
.about{
    width: 900px;
    height: 200px;
    /* background-color: #e2d1ae; */
    border: solid #f8f4f4;
    margin: 95px 0px 20px;
    box-sizing: border-box;
    position: relative;
    box-shadow: 5px 5px 5px  #adacaa;

}

.about h4{
    position: absolute;
    left:  190px;
    top: 15px;
    font-size: 35px;
    font-family: cursive;
    color: #b3650b;
}
.about p {
    display: inline-block;
    width: 500px;
    height: 20px;
    text-align: left;
    font-size: 16px;
    color: #f8eded;
    position: absolute;
    left:190px ;
    bottom: 95px;

}
.about img{
    display: inline-block;
    position: absolute;
    left: 25px;
    bottom: 2px;

}
.sol{
    width: 180px;
    height: 55px;
    /* background-color: #f0d7a4; */
    border: double #f8eded;
    letter-spacing: 1em;
    color: #f3dede;
    position: absolute;
    left:  35px;
    transition: all 1s;
}
.sol:hover{
    transform: scale(1.5);
}
.hobby{
    width: 980px;
    height: 200px;
    margin: 60px auto;
    position: relative;
    transition: width 2s;
    -moz-transition: width 2s;
    -webkit-transition: width 2s;
    -o-transition: width 2s;
}
.hobby:hover{
    width: 250px;
}
.secend{
    display: inline-block;
    width: 150px;
    height: 150px;
    border-radius:75px ;
    background-color: #b9b2a4;
    position: absolute;
    top: 20px;
    left: 30px;
    overflow: hidden;
    border: 1px solid black;
}
.secend img{
    transition: all 1.5s;
}
.secend img:hover{
    transform: scale(1.5);
    transform: rotate(360deg);
}
.ok{
    display: inline-block;
    color: #e2d9d9;
    transition: all 1.5s;
    position: absolute;
    left: 90px;
    top: 175px;

}
.ok:hover{
    transform: scale(1.5);
    transform: rotate(360deg);
}
.third{
   width: 150px;
   height: 150px;
   border-radius:75px ;
   background-color: #b9b2a4;
   display: inline-block;
   position: absolute;
   top: 20px;
   left:  220px;
   overflow: hidden;
}
.third img{
    transition: all 1.5s;
}
.third img:hover{
    transform: scale(1.5);
    transform: rotate(360deg);
}
.op{
    display: inline-block;
    color:  #e2d9d9;
    position: absolute;
    top: 175px;
    left: 283px;
    transition: all 1.5s;
}
.op:hover{
    transform: scale(1.5);
    transform: rotate(360deg);
}
.fourth{
   width: 150px;
   height: 150px;
   border-radius:75px ;
   background-color: #b9b2a4;
   display: inline-block;
   position: absolute;
   top: 20px;
   left: 410px;
   overflow: hidden;
}
.fourth img{
    transition: all 1.5s;
}
.fourth img:hover{
    transform: scale(1.5);
    transform: rotate(360deg);
}
.ou{
    display: inline-block;
    color:  #e2d9d9;
    position: absolute;
    top: 175px;
    left: 476px;
    transition: all 1.5s;
}
.ou:hover{
    transform: scale(1.5);
    transform: rotate(360deg);
}
.fifth{
   width: 150px;
   height: 150px;
   border-radius:75px ;
   background-color: #b9b2a4;
   display: inline-block;
   position: absolute;
   top: 20px;
   left: 600px;
   overflow: hidden;
}
.fifth img{
    transition: all 1.5s;
}
.fifth img:hover{
    transform: scale(1.5);
    transform: rotate(360deg);
}
.oy{
    display: inline-block;
    color: #e2d9d9 ;  
    position: absolute;
    top: 175px;
    left: 669px;
    transition: all 1.5s;
}
.oy:hover{
    transform: scale(1.5);
    transform: rotate(360deg);
}
.sixth{
   width: 150px;
   height: 150px;
   border-radius:75px ;
   background-color: #b9b2a4;
   display: inline-block;
   position: absolute;
   top: 20px;
   left: 790px;
   overflow: hidden;
}
.sixth img{
    transition: all 1.5s;
}
.sixth img:hover{
    transform: scale(1.5);
    transform: rotate(360deg);
}
.ot{
    display: inline-block;
    color:  #e2d9d9;
    position: absolute;
    top: 175px;
    left: 862px;
    transition: all 1.5s;
}
.ot:hover{
    transform: scale(1.5);
    transform: rotate(360deg);
}
.zuo{
    width: 200px;
    height: 55px;
    /* background-color: #f5dba8; */
    margin: 5px;
    border: double #f8eded;
    color: #f3e3e3;
    position: absolute;
    left: 35px;
    top: 855px;
    transition: all 1s;
}
.zuo:hover{
    transform: scale(1.5);
}
.zuo h4{
    letter-spacing: 1em;
    position: absolute;
    top: 5px;
    left: 55px;
}
.zuo h6{
    letter-spacing: 0.5em;
    position: absolute;
    top: 25px;
    left: 40px;
}
.works{
    width: 1400px;
    height:850px ;
    display: inline-block;
    /* background-color:  floralwhite; */
    position: relative;
}
.seventh{
    width: 180px;
    height: 200px;
    display: inline-block;
    background-color: #918f8b;
    border: solid #f8f4f4;
    position: absolute;
    left: 40px;
    top: 40px;

}
.seventh p{
    display: inline-block;
    color: #f8eded;
    font-family:cursive ;
    position: absolute;
    left: 5px;
    top: 205px;
}
.seventh img{
    position: absolute;
    top: 40px;
    left: 0px;
    transition: all 1s;
}
.seventh img:hover{
    transform: translate(10px, 200px) scale(2);
}
.eighth{
    width: 180px;
    height: 200px;
    display: inline-block;
    background-color: #918f8b;
    border: solid #f8f4f4;
    position: absolute;
    left: 280px;
    top: 40px;
}
.eighth p{
    display: inline-block;
    color: #f8eded;
    font-family:cursive ;
    position: absolute;
    left: 5px;
    top: 205px;
}
.eighth img{
    position: absolute;
    top: 40px;
    left: 0px;
    transition: all 1s;
}
.eighth img:hover{
    transform: translate(10px, 200px) scale(2);
}
.ninth{
    width: 180px;
    height: 200px;
    display: inline-block;
    background-color: #918f8b ;
    border: solid #f8f4f4;
    position: absolute;
    left: 520px;
    top: 40px;
}
.ninth p{
    display: inline-block;
    color: #f8eded;
    font-family:cursive ;
    position: absolute;
    left: 5px;
    top: 205px;
   
}
.ninth img{
    position: absolute;
    top: 40px;
    left: 0px;
    transition: all 1s;
}
.ninth img:hover{
    transform: translate(10px, 200px) scale(2);
}
.seven{
    position: absolute;
    left: 450px;
    top: 350px;
    transition: all 1s;
}
.seven:hover{
    transform: translate(10px, 200px) scale(2);
}
.eight{
    position: absolute;
    top: 320px;
    right: 320px ;
}
.wo{
    width: 180px;
    height: 200px;
    display: inline-block;
    background-color: #918f8b ;
    border: solid #f8f4f4;
    position: absolute;
    left: 520px;
    bottom: 110px;
}
.wo p{
    display: inline-block;
    color: #f8eded;
    font-family:cursive ;
    position: absolute;
    left: 5px;
    top: 205px;
}
.wo img{
    position: absolute;
    top: 40px;
    left: 0px;
    transition: all 1s;
}
.wo img:hover{
    transform: translate(10px, 200px) scale(2);
}
.qo{
    width: 180px;
    height: 200px;
    display: inline-block;
    background-color: #918f8b ;
    border: solid #f8f4f4;
    position: absolute;
    left: 40px;
    bottom: 110px;
}
.qo p{
    display: inline-block;
    color: #f8eded;
    font-family:cursive ; 
    position: absolute;
    left: 5px;
    top: 205px;
}
.qo img{
    position: absolute;
    top: 40px;
    left: 0px;
    transition: all 1s;
}
.qo img:hover{
    transform: translate(10px, 200px) scale(2);
}
.ao{
    width: 180px;
    height: 200px;
    display: inline-block;
    background-color:  #918f8b;
    border: solid #f8f4f4;
    position: absolute;
    left: 280px;
    bottom: 110px;
}
.ao p{
    display: inline-block;
    color: #f8eded;
    font-family:cursive ;
    position: absolute;
    left: 5px;
    top: 205px;
}
.ao img{
    position: absolute;
    top: 40px;
    left: 0px;
    transition: all 1s;
}
.ao img:hover{
    transform: translate(10px, 200px) scale(2);
}
.lu{
    width: 150px;
    height: 180px;
    display: inline-block;
    background-color: #dbc8a3;
    position: absolute;
    left: 300px;
    top: 299px;
    transition: all 1s;
}
.lu:hover{
    transform: translate(10px, 200px) scale(3) rotate(45deg);
}
.lu p{
    font-family: cursive; 
    font-size: 15px;
    color: #272525;
    text-align: left;
    text-indent: 2em;
    position: absolute;
    top: 55px;
    left: 0px;
}
.yu{
    width: 200px;
    height: 180px;
    background-color:  #dbc8a3;
    overflow: hidden;
    position: absolute;
    top: 334px;
    right: 200px;
    transition: all 1s;
}
.yu:hover{
    transform: translate(10px, 200px) scale(3) rotate(45deg);
}
.yu p{
    font-family: cursive; 
    font-size: 15px;
    color: #272525;
    text-align: left;
    text-indent: 2em;
    position: absolute;
    top: 20px;
    left: 0px;
}
.so{
    width: 300px;
    height: 100px;
    /* background-color: #885e09; */
    border: solid #85817c;
    position: absolute;
    right: 199px;
    top: 120px;
}
.so p{
    display: inline-block;
    width: 300px;
    height: 20px;
    text-align: left;
    font-size: 15px;
    text-indent: 2em;
    color: #f8f4f4;
}
.ro{
    width: 300px;
    height: 150px;
    /* background-color: #8d8066; */
    border: solid #eee3cd;
    position: absolute;
    right: 199px;
    bottom: 120px;
}
.ro p{
    display: inline-block;
    width: 300px;
    text-align: left;
    font-size: 15px;
    text-indent: 2em;
    color: #f8f4f4;
    position: absolute;
    top: 10px;
    left: 1px;
   
}
.do{
    width: 240px;
    height: 35px;
    /* background-color: floralwhite; */
    border: solid #f8f4f4;
    margin: 5px;
    position: absolute;
    left: 550px;
    bottom: 157px;
    color:#f8f4f4 ;
    transition: all 1s;
}
.do:hover{
    transform: translate(10px, 200px) scale(1);
}
.do p{
    position: absolute;
    top: 6px;
    left: 2px;
}
.footer{
    width: 1440px;
    height: 150px;
    background-color: #747271;
    position: absolute;
    bottom: 0px;
}
.footer img{
    position: absolute;
    left: 350px;
    bottom:25px ;
}
.footer p{
    display: inline-block;
    position: absolute;
    left: 500px;
    bottom: 55px;
}


